<template>
  <div>
    <CheckboxGroup
      class="selection"
      v-model="layerSelected"
      v-show="selectionShown"
    >
      <Checkbox label="mountain">
        <i class="icon icon-mountain"></i>
        <div class="text">
          <span class="title">山</span>
          <span class="subtitle">Mountain</span>
        </div>
      </Checkbox>
      <Checkbox label="water">
        <i class="icon icon-water"></i>
        <div class="text">
          <span class="title">水</span>
          <span class="subtitle">Water</span>
        </div>
      </Checkbox>
      <Checkbox label="forest">
        <i class="icon icon-forest"></i>
        <div class="text">
          <span class="title">林</span>
          <span class="subtitle">Forest</span>
        </div>
      </Checkbox>
      <Checkbox label="field">
        <i class="icon icon-field"></i>
        <div class="text">
          <span class="title">田</span>
          <span class="subtitle">Field</span>
        </div>
      </Checkbox>
      <Checkbox label="lake">
        <i class="icon icon-lake"></i>
        <div class="text">
          <span class="title">湖</span>
          <span class="subtitle">Lake</span>
        </div>
      </Checkbox>
      <Checkbox label="grass">
        <i class="icon icon-grass"></i>
        <div class="text">
          <span class="title">草</span>
          <span class="subtitle">Grass</span>
        </div>
      </Checkbox>
      <Checkbox label="architecture">
        <i class="icon icon-architecture"></i>
        <div class="text">
          <span class="title">建筑</span>
          <span class="subtitle">Architecture</span>
        </div>
      </Checkbox>
      <Checkbox label="facility">
        <i class="icon icon-facility"></i>
        <div class="text">
          <span class="title">设施</span>
          <span class="subtitle">Facility</span>
        </div>
      </Checkbox>
    </CheckboxGroup>
    <vw-right v-show="panelShown">
      <vw-row>
        <vw-box box-name="智慧生态" box-type="train">
          <button @click="wisdomEcology(modalHrefs.tz_url)" class="gdtz">
            更多
          </button>
          <vw-box-item width="30%">
            <ve-chart-liquid
              class="overall chart-liquid chart-index-1"
              id="current-ecology-index"
              title="生态健康指数"
              unit="分"
              :chart-data="chartData.ecologyIndex"
              :height="140 * ratio"
            ></ve-chart-liquid>
          </vw-box-item>
          <vw-box-item width="70%" box-type="train">
            <vc-index-card
              width="33.3%"
              title="本底指数"
              :number="dataPanel.ecology.backgroundIndex"
              unit="分"
              color="#22A857"
            ></vc-index-card>
            <vc-index-card
              width="33.3%"
              title="生境指数"
              :number="dataPanel.ecology.biotope"
              unit="分"
              color="#22A857"
            ></vc-index-card>
            <vc-index-card
              width="33.3%"
              title="生物指数"
              :number="dataPanel.ecology.biology"
              unit="分"
              color="#22A857"
            ></vc-index-card>
            <vc-index-card
              width="33.3%"
              title="舒适指数"
              :number="dataPanel.ecology.comfortable"
              unit="分"
              color="#22A857"
            ></vc-index-card>
            <vc-index-card
              width="33.3%"
              title="价值指数"
              :number="dataPanel.ecology.worth"
              unit="分"
              color="#22A857"
            ></vc-index-card>
            <vc-index-card
              width="33.3%"
              title="资源指数"
              :number="dataPanel.ecology.resource"
              unit="分"
              color="#22A857"
            ></vc-index-card>
          </vw-box-item>
        </vw-box>
      </vw-row>
      <vw-row>
        <vw-box box-name="智慧建造" box-type="train">
          <button @click="wisdomEcology(modalHrefs.jz_url)" class="gdtz">
            更多
          </button>
          <vw-box-item width="40%" box-type="tower">
            <vc-icon-card
              width="100%"
              icon-name="icon-project-amount"
              title="项目总数"
              :number="dataPanel.constructon.projectAmount"
            ></vc-icon-card>
            <vc-icon-card
              width="100%"
              icon-name="icon-accomplish-percent"
              title="总体完成度"
              :number="dataPanel.constructon.accomplishPercent"
              unit="%"
            ></vc-icon-card>
          </vw-box-item>
          <vw-box-item width="60%" box-type="train">
            <vc-icon-card
              width="50%"
              icon-name="icon-patrol-count"
              title="巡检次数"
              :number="dataPanel.constructon.patrolCount"
            ></vc-icon-card>
            <vc-icon-card
              width="50%"
              icon-name="icon-worker-amount"
              title="总人数"
              :number="dataPanel.constructon.workerAmount"
            ></vc-icon-card>
            <vc-icon-card
              width="50%"
              icon-name="icon-pass-count"
              title="合格次数"
              :number="dataPanel.constructon.passCount"
            ></vc-icon-card>
            <vc-icon-card
              width="50%"
              icon-name="icon-worker-registered"
              title="在册人数"
              :number="dataPanel.constructon.workerRegistered"
            ></vc-icon-card>
            <vc-icon-card
              width="50%"
              icon-name="icon-hidden-dangerous"
              title="安全隐患数"
              :number="dataPanel.constructon.hiddenDangerous"
            ></vc-icon-card>
            <vc-icon-card
              width="50%"
              icon-name="icon-worker-field"
              title="在场人数"
              :number="dataPanel.constructon.workerField"
            ></vc-icon-card>
          </vw-box-item>
        </vw-box>
      </vw-row>
      <vw-row>
        <vw-box box-name="智慧风景" box-type="train">
          <button @click="wisdomEcology(modalHrefs.fj_url)" class="gdtz">
            更多
          </button>
          <vw-box-item width="100%" box-type="train">
            <vc-icon-card
              width="35%"
              icon-name="icon-tourist-on-island"
              title="实时在岛人数"
              :number="dataPanel.landscape.touristOnIsland"
            ></vc-icon-card>
            <vc-icon-card
              width="30%"
              icon-name="icon-subscribe-today"
              title="今日预约"
              :number="dataPanel.landscape.subscribeToday"
            ></vc-icon-card>
            <vc-icon-card
              width="35%"
              icon-name="icon-bus-running"
              title="运行中公交车"
              :number="dataPanel.landscape.busRunning"
            ></vc-icon-card>
          </vw-box-item>
          <vw-box-item width="60%">
            <ve-chart-line-dual
              v-if="landscapeState"
              id="chart-tourist-flow"
              title="早晚人流情况"
              :chart-data="chartData.touristFlow"
              legend-orient="vertical"
              :height="125 * ratio"
              class="overall chart-line-dual chart-index-2"
            ></ve-chart-line-dual>
          </vw-box-item>
          <vw-box-item width="40%">
            <ve-chart-pie
              id="chart-travel-methods"
              :chart-data="chartData.travelMethods"
              :legend="true"
              :height="125 * ratio"
              class="overall chart-pie chart-index-3"
            ></ve-chart-pie>
          </vw-box-item>
        </vw-box>
      </vw-row>
      <vw-row>
        <vw-box box-name="智慧管理" box-type="tower">
          <button @click="wisdomEcology(modalHrefs.gl_url)" class="gdtz">
            更多
          </button>
          <vw-box-item>
            <vw-plate title="今日报警监测" box-type="train">
              <vw-plate-item width="40%">
                <vc-icon-card
                  width="100%"
                  icon-name="icon-warning-count"
                  title="报警总数"
                  :number="dataPanel.management.warningCount"
                ></vc-icon-card>
              </vw-plate-item>
              <vw-plate-item width="60%" box-type="train">
                <vc-index-card
                  width="33.3%"
                  title="未处理"
                  :number="dataPanel.management.undone"
                  color="#DCA027"
                ></vc-index-card>
                <vc-index-card
                  width="33.3%"
                  title="已派单"
                  :number="dataPanel.management.send"
                  color="#0080FF"
                ></vc-index-card>
                <vc-index-card
                  width="33.3%"
                  title="已解除"
                  :number="dataPanel.management.resolved"
                  color="#22A857"
                ></vc-index-card>
              </vw-plate-item>
            </vw-plate>
            <vw-plate title="今日未处置任务" box-type="tower">
              <vw-plate-item>
                <Table
                  :columns="tableData.columns"
                  :max-height="125 * ratio"
                  :data="tableData.rows"
                ></Table>
              </vw-plate-item>
            </vw-plate>
          </vw-box-item>
        </vw-box>
      </vw-row>
    </vw-right>
    <button
      class="c-button overall c-button-return"
      v-show="returnShown"
      @click="setState_Initial"
    >
      <span class="text">返回</span>
    </button>
  </div>
</template>

<script>
import bus from "@/lib/bus";
import { _Space } from "@/lib/vmixs";
import _ from "lodash";
import {
  uniFetcherConstruction,
  uniFetcherEcological,
  uniFetcherLandscape,
  uniFetcherManagement,
} from "@/request/uniFetcher.js";
const ratio = JSON.parse(localStorage.ratio);
export default {
  name: "",
  data() {
    return {
      //layout
      ratio: ratio,
      //interactions
      layerSelected: [],
      selectionShown: true,
      panelShown: true,
      returnShown: false,
      //3d scene
      camera: {
        init: null,
      },
      //data
      chartData: {
        ecologyIndex: 98,
        touristFlow: {},
        travelMethods: [],
      },
      dataPanel: {
        ecology: {
          backgroundIndex: 98,
          biotope: 96,
          biology: 94,
          comfortable: 98,
          worth: 94,
          resource: 93,
        },
        constructon: {
          projectAmount: 16,
          accomplishPercent: 20,
          patrolCount: 10,
          workerAmount: 381,
          passCount: 1,
          workerRegistered: 381,
          hiddenDangerous: 9,
          workerField: 346,
        },
        landscape: {
          touristOnIsland: 300,
          subscribeToday: 663,
          busRunning: 3,
        },
        management: {
          warningCount: 14,
          undone: 6,
          send: 6,
          resolved: 2,
        },
      },
      tableData: {
        columns: [
          {
            title: "报警时间",
            key: "time",
          },
          {
            title: "类型",
            key: "type",
          },
          {
            title: "等级",
            key: "level",
          },
        ],
        rows: [
          {
            time: "2020-12-21 10:45",
            type: "非法越界",
            level: "五级",
          },
          {
            time: "2020-12-21 10:45",
            type: "非法越界",
            level: "五级",
          },
          {
            time: "2020-12-21 10:45",
            type: "非法越界",
            level: "五级",
          },
          {
            time: "2020-12-21 10:45",
            type: "非法越界",
            level: "五级",
          },
          {
            time: "2020-12-21 10:45",
            type: "非法越界",
            level: "五级",
          },
        ],
        maxHeight: 200,
      },
      modalHrefs: {
        tz_url: "http://eco.zggyd.com/#/ecologicWeb",
        jz_url:
          "http://construct.zggyd.com/home.html#/enterprise_bigscreen/gydHomePage_tp?tenantId=10800148&orgId=10803794&orgType=GROUP",
        fj_url: "http://scenery.zggyd.com/#/tourWeb",
        gl_url: "http://manage.zggyd.com/#/wisdomManageWeb",
      },
      landscapeState: false,
    };
  },
  watch: {
    layerSelected: {
      handler(n, o) {
        console.log("layerSelected", n);
        console.log("layerSelected", o);
        if (n[0]) {
          this.setState_LayerSelect(n[0]);
        }
        console.log(n);
        if (o) {
          if (n.length > o.length) {
            //转新增图层的非标API，图层名为n.tail()
            switch (n.tail()) {
              case "mountain":
                this.useLayerAPI("OverviewMoutain", 0);
                break;
              case "water":
                this.useLayerAPI("OverviewWater", 0);
                break;
              case "forest":
                this.useLayerAPI("OverviewForest", 0);
                break;
              case "field":
                this.useLayerAPI("OverviewField", 0);
                break;
              case "lake":
                this.useLayerAPI("OverviewLake", 0);
                break;
              case "grass":
                this.useLayerAPI("OverviewGrass", 0);
                break;
              case "architecture":
                this.useLayerAPI("OverviewArchitecture", 0);
                break;
              case "facility":
                this.useLayerAPI("OverviewFacility", 0);
                break;
            }
          } else {
            //转隐藏图层的非标API，图层名为o.tail()
            switch (o.tail()) {
              case "mountain":
                this.useLayerAPI("OverviewMoutain", 1);
                this.useLayerAPI("OverviewWater", 1);
                this.useLayerAPI("OverviewForest", 1);
                this.useLayerAPI("OverviewField", 1);
                this.useLayerAPI("OverviewLake", 1);
                this.useLayerAPI("OverviewGrass", 1);
                this.useLayerAPI("OverviewArchitecture", 1);
                this.useLayerAPI("OverviewFacility", 1);
                break;
            }
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
  mixins: [_Space],
  created() {
    this.delarePageName();
  },
  mounted() {
    this.setState_Initial();
    this.getBuildProjectInfo();
    this.getPanelData();
    this.getManagementTodayWarningList();
    this.getManageNoDisposeList();
    this.getPeopleInfoCount();
    this.getStreamPeopleCount();
    this.getBookingPeopleCount();
  },
  components: {
    "vc-index-card": () => import("../../components/IndexCard"),
    "vc-icon-card": () => import("../../components/IconCard"),
    "vw-plate": () => import("../../layout/Plate"),
    "vw-plate-item": () => import("../../layout/PlateItem"),
    "ve-chart-liquid": () => import("../../components/echarts/ChartLiquid"),
    "ve-chart-line-dual": () =>
      import("../../components/echarts/ChartLineDual"),
    "ve-chart-pie": () => import("../../components/echarts/ChartPie"),
  },
  methods: {
    goBackInfo(curData, backData, name) {
      console.log("goBackInfo", curData, backData);
      backData[name] = curData.map((o) => {
        if (o.name == null) {
          o.name = "60-75";
        }
        return {
          name: o.name,
          value: parseInt(o.value),
        };
      });
    },
    getBuildProjectInfo() {
      uniFetcherConstruction.getBuildProject().then((res) => {
        if (res) {
          this.dataPanel.constructon.projectAmount = parseInt(
            res.projectAmount
          );
          this.dataPanel.constructon.accomplishPercent = parseInt(
            res.accomplishPercent
          );
          this.dataPanel.constructon.patrolCount = parseInt(res.patrolCount);
          this.dataPanel.constructon.passCount = parseInt(res.passCount);
          this.dataPanel.constructon.hiddenDangerous = parseInt(
            res.hiddenDangerous
          );
          this.dataPanel.constructon.workerAmount = parseInt(res.workerAmount);
          this.dataPanel.constructon.workerRegistered = parseInt(
            res.workerRegistered
          );
          this.dataPanel.constructon.workerField = parseInt(res.workerField);
        }
      });
    },
    getPanelData() {
      uniFetcherEcological.getEcologyPanelData().then((res) => {
        if (res) {
          this.chartData.ecologyIndex = parseInt(res.ecologyIndex);
          this.dataPanel.ecology.backgroundIndex = parseInt(
            res.backgroundIndex
          );
          this.dataPanel.ecology.biotope = parseInt(res.biotopeIndex);
          this.dataPanel.ecology.biology = parseInt(res.biologyIndex);
          this.dataPanel.ecology.comfortable = parseInt(res.comfortableIndex);
          this.dataPanel.ecology.worth = parseInt(res.worthIndex);
          this.dataPanel.ecology.resource = parseInt(res.resourceIndex);
        }
      });
    },
    getManagementTodayWarningList() {
      uniFetcherManagement.getTodayWarningList().then((res) => {
        if (res) {
          this.dataPanel.management.warningCount = parseInt(res.warningCount);
          this.dataPanel.management.undone = parseInt(res.undone);
          this.dataPanel.management.send = parseInt(res.send);
          this.dataPanel.management.resolved = parseInt(res.resolved);
        }
      });
    },
    getManageNoDisposeList() {
      uniFetcherManagement.getManageNoDispose().then((res) => {
        if (res) {
          this.tableData.rows = res.rows;
        }
      });
    },
    getPeopleInfoCount() {
      uniFetcherLandscape.getPeopleInfo().then((res) => {
        if (res) {
          this.chartData.travelMethods = res.travelMethods;
        }
      });
    },
    getStreamPeopleCount() {
      uniFetcherLandscape.getStreamPeople().then((res) => {
        if (res) {
          this.dataPanel.landscape.touristOnIsland = parseInt(
            res.touristOnIsland
          );
          this.goBackInfo(res.upIsland, this.chartData.touristFlow, "上岛(人)");
          this.goBackInfo(
            res.outIsland,
            this.chartData.touristFlow,
            "出岛(人)"
          );
          if (this.chartData.touristFlow["上岛(人)"]) {
            this.landscapeState = true;
          }
        }
      });
    },
    getBookingPeopleCount() {
      uniFetcherLandscape.getBookingPeople().then((res) => {
        if (res) {
          this.dataPanel.landscape.subscribeToday = parseInt(
            res.subscribeToday
          );
        }
      });
    },
    delarePageName() {
      bus.$emit("set-sphere-actived", "Overall");
    },
    useLayerAPI(name, status) {
      //STATUS 0 为打开，1 为关闭图层
      // debugger
      console.log("useLayerAPI", name, status);
      window.cloudRender.SuperAPI("specialChannel", {
        actionname: `${name}`,
        status: status,
      });
      let nameObj = {
        "OverviewMoutain":"1",
        "OverviewWater":"2",
        "OverviewForest":"3",
        "OverviewField":"4",
        "OverviewLake":"5",
        "OverviewGrass":"6",
        "OverviewArchitecture":"7",
        "OverviewFacility":"8",
      };
      let statusObj = {
        1: "false",
        0: "true",
      };
      this.$anyInterface("API_LayerEffectActor","OverLayEffect",`${statusObj[status]}`,this.dataManualSet.season)
    },
    setState_Initial() {
      bus.$emit("open-sphere");
      bus.$emit("open-toolbar");
      this.layerSelected = [];
      this.panelShown = true;
      this.returnShown = false;
      this.renderPanel();
      // 调用非标API隐藏全部图层
      this.useLayerAPI("OverviewMoutain", 1);
      this.useLayerAPI("OverviewWater", 1);
      this.useLayerAPI("OverviewForest", 1);
      this.useLayerAPI("OverviewField", 1);
      this.useLayerAPI("OverviewLake", 1);
      this.useLayerAPI("OverviewGrass", 1);
      this.useLayerAPI("OverviewArchitecture", 1);
      this.useLayerAPI("OverviewFacility", 1);
      this.InitCamera();
      this.ClearSpace();
    },
    setState_LayerSelect(layerName) {
      bus.$emit("close-sphere");
      bus.$emit("close-toolbar");
      this.panelShown = false;
      this.returnShown = true;
      //调用具体非标的接口
      switch (layerName) {
        case "mountain":
          this.useLayerAPI("OverviewMoutain", 0);
          break;
        case "water":
          this.useLayerAPI("OverviewWater", 0);
          break;
        case "forest":
          this.useLayerAPI("OverviewForest", 0);
          break;
        case "field":
          this.useLayerAPI("OverviewField", 0);
          break;
        case "lake":
          this.useLayerAPI("OverviewLake", 0);
          break;
        case "grass":
          this.useLayerAPI("OverviewGrass", 0);
          break;
        case "architecture":
          this.useLayerAPI("OverviewArchitecture", 0);
          break;
        case "facility":
          this.useLayerAPI("OverviewFacility", 0);
          break;
      }
      this.ClearSpace();
    },
    renderPanel() {
      // this.chartData.touristFlow = {
      //   "上岛(人)": [
      //     {
      //       name: "06:00",
      //       value: 33,
      //     },
      //     {
      //       name: "10:00",
      //       value: 12,
      //     },
      //     {
      //       name: "14:00",
      //       value: 46,
      //     },
      //     {
      //       name: "18:00",
      //       value: 56,
      //     },
      //     {
      //       name: "22:00",
      //       value: 36,
      //     },
      //   ],
      //   "出岛(人)": [
      //     {
      //       name: "06:00",
      //       value: 55,
      //     },
      //     {
      //       name: "10:00",
      //       value: 58,
      //     },
      //     {
      //       name: "14:00",
      //       value: 67,
      //     },
      //     {
      //       name: "18:00",
      //       value: 78,
      //     },
      //     {
      //       name: "22:00",
      //       value: 39,
      //     },
      //   ],
      // };
      // this.chartData.travelMethods = [
      //   {
      //     name: "轮渡",
      //     value: 44,
      //   },
      //   {
      //     name: "公交",
      //     value: 56,
      //   },
      // ];
    },

    // 智慧生态跳转
    wisdomEcology(dj_url) {
      console.log("dj_url", dj_url);
      bus.$emit("open-modal", {
        type: "web",
        url: dj_url,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.box-body {
}
</style>